import React, { useEffect, useState } from 'react';
import './paidaskdialog.css' 
import { useDispatch } from 'react-redux';
import { Mask } from 'antd-mobile';
import { reqSaveEvent } from '@/store/actions/apiServices';


export default function PaidAskDialog({ visible, onDidPaid, onNotPaid, onClose }) {

    //获取 Redux 分发器
    const dispatch = useDispatch()

    const [needDisplay, setNeedDisplay] = useState(false);

    //监听
    useEffect(() => {
        setNeedDisplay(visible)
    }, [visible])


    //点击监听
    const onHandleDidPaidClick = () => {
        // 打点
        reqSaveEvent("REPAY_DID_PAID_CLICK", "")
        // 回调
        onDidPaid && onDidPaid()
    }

    //点击监听
    const onHandleNotPaidClick = () => {
        // 打点
        reqSaveEvent("REPAY_NOT_PAID_CLICK", "")
        // 回调
        onNotPaid && onNotPaid()
    }

    return (
        <Mask visible={needDisplay} opacity={0.6}
            onMaskClick={() => { }}>
            <div className="paidaAskDialogOverlayBg">
                <div className="paidaAskDialogOverlayContent">
                    <div className='paidAskDialogTitle'>Have you paid for this order?</div>
                    <div className='paidAskDialogLine'></div>
                    <div className='paidAskDialogButtonContent'>
                        <div className='paidAskDialogButtonDidPaid' onClick={onHandleDidPaidClick}>I have paid</div>
                        <div className='paidAskDialogButtonSpace'></div>
                        <div className='paidAskDialogButtonNotPaid' onClick={onHandleNotPaidClick}>Not paid</div>
                    </div>
                </div>
            </div>
        </Mask >
    );
};
